<label class="mat-slide-toggle-label" #label>

  <div #toggleBar class="mat-slide-toggle-bar"
       [class.mat-slide-toggle-bar-no-side-margin]="!labelContent.textContent || !labelContent.textContent.trim()">

    <input #input class="mat-slide-toggle-input cdk-visually-hidden" type="checkbox"
           [id]="inputId"
           [required]="required"
           [tabIndex]="tabIndex"
           [checked]="checked"
           [disabled]="disabled"
           [attr.name]="name"
           [attr.aria-label]="ariaLabel"
           [attr.aria-labelledby]="ariaLabelledby"
           (change)="_onChangeEvent($event)"
           (click)="_onInputClick($event)">

    <div class="mat-slide-toggle-thumb-container"
         #thumbContainer
         (slidestart)="_onDragStart()"
         (slide)="_onDrag($event)"
         (slideend)="_onDragEnd()">

      <div class="mat-slide-toggle-thumb"></div>

      <div class="mat-slide-toggle-ripple" mat-ripple
           [matRippleTrigger]="label"
           [matRippleDisabled]="disableRipple || disabled"
           [matRippleCentered]="true"
           [matRippleRadius]="20"
           [matRippleAnimation]="{enterDuration: 150}">

        <div class="mat-ripple-element mat-slide-toggle-persistent-ripple"></div>
      </div>

    </div>


  </div>

  <span class="mat-slide-toggle-content" #labelContent (cdkObserveContent)="_onLabelTextChange()">
    <ng-content></ng-content>
  </span>
</label>
